import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ModalForm, ProForm, ProFormText, ProTable } from '@ant-design/pro-components';
import { Button, Image, message, Popconfirm, Tag } from 'antd';
import { useRef } from 'react';
import { currentUser, deleteUser, searchUsers, updateUserInfoByAdmin } from '@/services/ant-design-pro/api';
import { ProFormSelect } from '@ant-design/pro-form';
import { selectAvatarUrl, selectGender, selectUserRole, selectUserStatus } from '@/constants';
import type { API } from '@/services/ant-design-pro/typings';
export const waitTimePromise = async (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export const waitTime = async (time: number = 100) => {
  await waitTimePromise(time);
};



const columns: ProColumns<API.CurrentUser>[] = [


  {
    dataIndex: 'id',
    valueType: 'indexBorder',
    width: 48,
  },
  {
    dataIndex: 'username',
    title: '用户名',
    copyable: true,
  },
  {
    dataIndex: 'userAccount',
    title: '账号',
    copyable: true,
  },
  {
    dataIndex: 'avatarUrl',
    title: '头像',
    copyable: true,
    render: (_, record) => (
      <div >
        <Image src={record.avatarUrl} width={60} height={60} />
      </div>
    ),

  },
  {
    dataIndex: 'gender',
    title: '性别',
    copyable: true,
    valueEnum: {
      0: { text: '女' },
      1: { text: '男' },
    },
    width: 48,
  }, {
    dataIndex: 'phone',
    title: '手机号',
    copyable: true,

  },
  {
    dataIndex: 'email',
    title: '邮箱',
    copyable: true,

  },
  {
    dataIndex: 'userRole',
    title: '角色',
    valueType: 'select',
    valueEnum: {
      0: { text: '普通用户' },
      1: { text: '系统管理员' },
      2: { text: '后台客服' },
    },
  },
  {
    dataIndex: 'userStatus',
    title: '用户状态',
    valueType: 'select',
    valueEnum: {
      0: { text: '正常', status: 'Success' },
      1: { text: '异常', status: 'Error' },
    },
  }, {
    dataIndex: 'createTime',
    title: '创建时间',
    valueType: 'dateTime',
  },

  {
    title: '操作',
    align: 'center',
    valueType: 'option',
    key: 'option',
    render: (text, record, _, action) => [
      <ModalForm<API.CurrentUser>
        title="修改用户信息"
        trigger={<Button type="link">修改</Button>}
        autoFocusFirstInput
        modalProps={{
          destroyOnClose: true,
          onCancel: () => console.log('run'),
        }}
        submitTimeout={2000}
        onFinish={async (values) => {
          //点击了提交
          console.log('values 的值为-------');
          //发起请求
          values.id = record.id;
          const isModify = await updateUserInfoByAdmin(values);
          if (isModify) {
            message.success('提交成功');
            // 刷新用户信息表单
            //   location.reload();
            return true;
          }
          return false;
        }}
      >
        <ProForm.Group>
          <ProFormText
            width="md"
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            initialValue={record.username}
          />
          <ProFormText
            width="md"
            name="userAccount"
            label="用户账户"
            placeholder="请输入账户"
            initialValue={record.userAccount}
          />
          <ProFormText
            width="md"
            name="phone"
            label="手机号"
            placeholder="请输入手机号"
            initialValue={record.phone}
          />
          <ProFormText
            width="md"
            name="email"
            label="邮箱"
            placeholder="请输入邮箱"
            initialValue={record.email}
          />
          <ProFormSelect
            name="userStatus"
            fieldProps={{
              size: 'large',
            }}
            label="用户状态"
            options={selectUserStatus}
            initialValue={record.userStatus}
            placeholder={'选择用户状态'}
            rules={[
              {
                required: true,
                message: '请选择用户状态',
              },
            ]}
          />
          <ProFormSelect
            name="avatarUrl"
            fieldProps={{
              size: 'large',
            }}
            label="用户头像"
            options={selectAvatarUrl}
            placeholder={'请选择用户头像 '}
            initialValue={record.avatarUrl}
            rules={[
              {
                required: true,
                message: '请输入选择用户头像!',
              },
            ]}
          />
          <ProFormSelect
            name="gender"
            fieldProps={{
              size: 'large',
            }}
            label="性别"
            options={selectGender}
            placeholder="请选择性别"
            initialValue={record.gender}
            rules={[
              {
                required: true,
                message: '请选择性别',
              },
            ]}
          />
          <ProFormSelect
            name="userRole"
            fieldProps={{
              size: 'large',
            }}
            label="用户角色"
            options={selectUserRole}
            initialValue={record.userRole}
            placeholder={'选择用户角色'}
            rules={[
              {
                required: true,
                message: '请选择用户角色',
              },
            ]}
          />
        </ProForm.Group>
      </ModalForm>,
      <a key="view">
        <Popconfirm
          title="删除用户"
          // description="你确定要删除他吗？"
          onConfirm={async (e) => {
            console.log(e);
            console.log(record.id);
            const id = record.id;
            const isDelete = await deleteUser({ id: id });
            if (isDelete) {
              message.success('删除成功');

              // 刷新用户信息表单
              // current.reload()
              //  location.reload();
            } else {
              message.error('删除失败');
            }
          }}
          onCancel={(e) => { }}
          okText="Yes"
          cancelText="No"
        >
          <Button type="link" danger>
            删除
          </Button>
        </Popconfirm>
      </a>,
    ],
  },
];

export default () => {
  const actionRef = useRef<ActionType>();

  return '開發中'
};